<template>
	<div id="user_list">
		<div class="table" v-show="parentDetailData.isTabelShow">
			<div class="container">
				<div>
					<div class="handle-box" style="float: left">
						<el-input v-model="searchcondition.userName" placeholder="名称" class="handle-input mr10"></el-input>
						<el-input v-model="searchcondition.userCount" placeholder="账号" class="handle-input mr10"></el-input>
						<el-input v-model="searchcondition.phone" placeholder="电话" class="handle-input mr10"></el-input>
						<el-select v-model="searchcondition.userStatus" placeholder="请选择">
							<el-option key="" label="全部" value=""></el-option>
							<el-option key="0" label="禁用" value="0"></el-option>
							<el-option key="1" label="启用" value="1"></el-option>
						</el-select>
						<el-button type="primary" icon="search" @click="searchCustomer">搜索</el-button>
					</div>
					<div style="float: right">
						<el-button type="primary" @click="handleDetail(null,null)" icon="add">添加</el-button>
					</div>
				</div>
				<el-table stripe :data="data" border style="width: 100%" ref="multipleTable" v-loading="loading">
					<el-table-column label="头像" width="60">
						<template slot-scope="scope">
							<div class="portrait">
								<img :src="scope.row.icon ? scope.row.iconUrl : portrait" alt="头像" />
							</div>							
						</template>
					</el-table-column>
					<el-table-column prop="userName" label="名称"></el-table-column>
					<el-table-column prop="userCount" label="账号"></el-table-column>					
					<el-table-column prop="phone" label="电话"></el-table-column>
					<el-table-column prop="createTime" label="创建时间">
					</el-table-column>
					<el-table-column label="状态" width="100px">
						<template slot-scope="scope">
							<el-button class="status_btn no-hover" v-if="scope.row.userStatus == 1" size="mini" type="success">启用</el-button>
							<el-button class="status_btn no-hover" v-else size="mini" type="warning">禁用</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
							<el-button type="danger" size="small" @click="handleSetUserStatus(1,scope.$index, scope.row)" v-if="scope.row.userStatus == 1 && scope.row.id>0">禁用</el-button>
						<el-button size="small" type="danger" @click="handleSetUserStatus(0,scope.$index, scope.row)" v-if="scope.row.userStatus == 0 && scope.row.id>0">启用</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchcondition.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<detail ref="detail"  :id="id"  :parentDetailData="parentDetailData" v-on:close="handleClose"></detail>		
	</div>
</template>

<script>
	import Vue from 'vue';
	import $ from 'jquery';
	import md5 from 'js-md5';
	let Base64 = require('js-base64').Base64;
	import detail from './detail'
	import service from '../../../../js/common/userservice.js'
	export default {
		components: {
			detail
		},
		data() {
			return {
				url: './static/vuetable.json',
				portrait:require('@/assets/portrait.png'), //默认头像
				searchcondition: {
					pageNum: 1,
					pageSize: 10,
					userName: '',
					phone:'',
					userCount:'',
					userStatus:'',
					userType:''
				},
				tableData: [],
				total: 0,
				id:'',
				multipleSelection: [],
				priDialogFormVisible: false,
				userinfo: {},
				selectedroles: [],
				loading: true,
				parentDetailData:{
					isTabelShow:true
				},
				haspost:false
			}
		},
		mounted() {
			if(!this.haspost){
				this.searchcondition.userType = this.$route.query.type;
				service.getPageData(this);
			}			
		},
		watch: {
			'$route' (to, from) {
				this.searchcondition.userType = this.$route.query.type;
				this.haspost = true;
				service.getPageData(this);
			}
		},
		computed: {
			data() {
				const self = this;
				return self.tableData.filter(function(d) {
					return d;
				})
			}
		},
		methods: {
			searchCustomer() { //搜索
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			handleCurrentChange(val) { //翻页
				this.searchcondition.pageNum = val;
				service.getPageData(this);
			},
			handleSizeChange(val) { //每页数量
				this.searchcondition.pageSize = val;
				service.getPageData(this);
			},
			selectChange(e) {
				this.getData();
			},
			handleDetail(index, row) {
				service.showDetail(this, row);		
			},
			handleClose() {
				this.priDialogFormVisible = false;
				service.getPageData(this);
			},
			handleSetUserStatus(state, index, row) {
				let self = this;
				self.$confirm('确定要' + (state == 0 ? "启用用户" : "禁用用户") + ', 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					state: 'warning'
				}).then(() => {
					let params = {};
					params.id=row.id;
					console.log(params);
					
					if(row.userStatus == 1) {
						params.userStatus = 0;
					} else {
						params.userStatus = 1;
					}
					self.httptool.ajaxPost(self.apis.modifyUserStatus, params, function(res) {
						if(res.code == 1) {
							service.getPageData(self);
						}
					});
				}).catch(() => {

				});
			},
			
			
		}
	}
</script>

<style lang="less" scoped>
	#user_list{
		.portrait{
			width: 30px;
			height: 30px;
			border-radius: 50%;
			overflow: hidden;
			img:extend(.oneLine){
				width: 100%;
				height: 100%;
			}
		}
	}
	
</style>